<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/jquery.ocupload-1.1.2.js"
	type="text/javascript"></script>
<script type="text/javascript">
	function doAdd(){
		//alert("增加...");
		$('#addOutMoneyWindow').window("open");
	}
	
	function doView(){
		$('#queryOutMoneyWindow').window("open");
	}
	
	function doDelete(){
		alert("删除...");
	}
	function doImport(){
		//location.href="/outMoneyImport.action";#exportOutMoneyWindow
		$('#exportOutMoneyWindow').window("open");
	}
	///修改
	function doEdit(){
		var rows = $("#grid").datagrid('getSelections');
		if(rows.length ==1){
			$("#editOutMoneyWindow").window('open');
			$("#editOutMoneyForm").form('load',rows[0]);
			
		}else{
			$.messager.alert("提示信息","一次只能修改一条信息！","warning")
		}
		
		
	}
	//工具栏
	var toolbar = [ {
		id : 'button-view',	
		text : '查询',
		iconCls : 'icon-search',
		handler : doView
	}, {
		id : 'button-add',
		text : '增加',
		iconCls : 'icon-add',
		handler : doAdd
	}, {
		id : 'button-Import',
		text : '导出',
		iconCls : 'icon-undo',
		handler : doImport
	},{
		id : 'button-edit',
		text : '修改',
		iconCls : 'icon-edit',
		handler : doEdit
	}];
	// 定义列
	var columns = [ [ {
		field : 'outid',
		checkbox : true,
	},{
		field : 'outname',
		title : '出账人',
		width : 120,
		align : 'center',
		formatter : function(data,row, index){
			if(data == null){
				return '<span style="color: red;">尚未填写</span>';
			}else{
				return data;
			}
		}
	}, {
		field : 'outdate',
		title : '出账时间',
		width : 120,
		align : 'center',
		formatter : function(data,row, index){
			if(data == null){
				return '<span style="color: red;">尚未填写</span>';
			}else{
				return data;
			}
		}
	}, {
		field : 'outmoney',
		title : '出账金额',
		width : 120,
		align : 'center',
		formatter : function(data,row, index){
			if(data == null){
				return '<span style="color: red;">尚未填写</span>';
			}else{
				return data;
			}
		}
	}, {
		field : 'outcomment',
		title : '出账内容',
		width : 320,
		align : 'center',
		formatter : function(data,row, index){
			if(data == null){
				return '<span style="color: red;">尚未填写</span>';
			}else{
				return data;
			}
		}
	} ] ];
	
	$(function(){
		// 先将body隐藏，再显示，不会出现页面刷新效果
		$("body").css({visibility:"visible"});
		
		// 取派员信息表格
		$('#grid').datagrid( {
			iconCls : 'icon-forward',
			fit : true,
			border : false,
			rownumbers : true,
			striped : true,
			pageList: [30,50,100],
			pagination : true,
			toolbar : toolbar,
			url : "/outMoneyPageQuery.action",
			idField : 'outid',
			columns : columns,
			onDblClickRow : doDblClickRow
		});
		
		
		// 添加借支信息窗口
		$('#addOutMoneyWindow').window({
	        title: '添加出账信息',
	        width: 400,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 350,
	        resizable:false
	    });
		
		// 修改借支信息窗口
		$('#editOutMoneyWindow').window({
	        title: '修改出账信息',
	        width: 400,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 350,
	        resizable:false
	    });
		
		// 导出借支信息窗口
		$('#exportOutMoneyWindow').window({
	        title: '导出出账信息',
	        width: 400,
	        modal: true,
	        shadow: true,
	        closed: true,
	        height: 200,
	        resizable:false
	    });
		
	});
	

	function doDblClickRow(rowIndex, rowData){
		$("#editOutMoneyWindow").window('open');
		$("#editOutMoneyWindow").form('load',rowData);
	}
	
	//添加出账信息
	$(function(){
		$("#saveOutMoneyInfo").click(function(){
			
			var vali = $("#addOutMoneyForm").form('validate');
			if(vali){
				$("#addOutMoneyForm").submit();
				$("#addOutMoneyWindow").window('close');
			}else{
				$.messager.alert('提示信息','您填写的信息不完整,麻烦请认真填写！','error');  
			}
			
		});
		
	});
	//修改出账信息
	$(function(){
		$("#editOutMoneyInfo").click(function(){
			var vali = $("#editOutMoneyForm").form('validate');
			if(vali){
				$("#editOutMoneyForm").submit();
				$("#editOutMoneyWindow").window('close');
				
			}else{
				$.messager.alert('提示信息','您填写的信息不不完善','warning');  
			}
			
		})
	});
</script>	
</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div region="center" border="false">
    	<table id="grid"></table>
	</div>
	<!-- 出账信息添加 -->
	<div class="easyui-window" title="出账信息进行添加" id="addOutMoneyWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="saveOutMoneyInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="addOutMoneyForm" action="/addOutMoneyInfo.action" method="post">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">添加出账统计信息</td>
					</tr>
					<!-- TODO 这里完善收派员添加 table -->
					<tr>
						<td>出账人</td>
						<td><input type="text" name="outname" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>出款金额</td>
						<td><input type="text" name="outmoney" class="easyui-validatebox" required="true" validType='length[1,8]'/>
						</td>
					</tr>
					<tr>
						<td>出款日期</td>
						<td><input type="text" name="outdate" class="easyui-datebox" required="true"/></td>
					</tr>
					<tr>
						<td>备注</td>
						<td>
							<textarea style="height: 90px;width: 170px" name="outcomment"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- 修改借支信息 -->
	<div class="easyui-window" title="对借支信息进行修改" id="editOutMoneyWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="editOutMoneyInfo" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="editOutMoneyForm" action="/editOutMoneyInfo.action" method="post">
				<input type="hidden" name="outid">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">修改出账信息</td>
					</tr>
					<tr>
						<td>收款人</td>
						<td><input type="text" name="outname" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>收款金额</td>
						<td><input type="text" name="outmoney" class="easyui-validatebox" required="true" validType='length[1,8]'/>
						</td>
					</tr>
					<tr>
						<td>收款日期</td>
						<td><input type="text" name="outdate" class="easyui-datebox" required="true" /></td>
					</tr>
					<tr>
						<td>备注</td>
						<td>
							<textarea style="height: 90px;width: 170px" name="outcomment"></textarea>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	<!-- 导出出账记录 -->
	<div class="easyui-window" title="导出出账记录" id="exportOutMoneyWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="exportOutMoneyInfo" icon="icon-undo" href="#" class="easyui-linkbutton" plain="true" >导出</a>
				<script type="text/javascript">
					$(function(){
						$("#exportOutMoneyInfo").click(function(){
							var vali = $("#exportOutMoneyForm").form('validate');
							if(vali){
								$("#exportOutMoneyForm").submit();
								$("#exportOutMoneyWindow").window('close');
							}else{
								$.messager.alert('提示信息','您填写的信息不不完善','warning');
							}
						});
					})
				</script>
			</div>
		</div>
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="exportOutMoneyForm" action="/exportOutMoneyInfo.action" method="post">
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">根据时间导出出账信息</td>
					</tr>
					<tr>
						<td>开始日期</td>
						<td><input type="text" name="beginDate" class="easyui-datebox" required="true" /></td>
					</tr>
					<tr>
						<td>结束日期</td>
						<td><input type="text" name="endDate" class="easyui-datebox" required="true" /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
</html>	